<div class="content-below-toolbar">
	
	<div class="inner-content">
		
		<div class="breadcrumb">
			<a href="../../">Products</a>
			{if $product.parent}
				<a href="../{$product.parent.code}/">{$product.parent.code} - {$product.parent.title|escape:"html":"UTF-8"}</a>
				{$product.code}
			{else}
				{$product.code}
				{if $product.title}
				 	- <span id="breadcrumb_title">{$product.title|escape:"html":"UTF-8"}</span>
				{else}
					Add product
				{/if}
			{/if}
		</div>
		
		<div class="field-group">
			<p>
				<label for="stock_control">Stock control</label>
				<input type="checkbox" name="product[stock_control]" value="1" {if $product.stock_control}checked="checked"{/if} id="stock_control" />
			</p>
			<p>
				<label for="stock_level">Stock level</label>
				<input type="text" name="product[stock_level]" value="{$product.stock_level|escape:"html":"UTF-8"}" id="stock_level" style="width:5em;text-align:center" />
			</p>
			<br class="clear" />
			<script type="text/javascript" charset="utf-8">
				{literal}
				$(function() {
					var stockControl = function() {
						if ($('#stock_control').is(':checked')) {
							$('#stock_level').removeAttr('disabled');
						} else {
							$('#stock_level').attr('disabled', true);
						}
					};
					$('#stock_control').change(stockControl);
					stockControl();
				});
				{/literal}
			</script>
		</div>

		<div class="field-group">
			<p>
				<label for="minimum_quantity">Minimum quantity</label>
				<input type="text" name="product[minimum_quantity]" value="{$product.minimum_quantity|escape:"html":"UTF-8"}" id="minimum_quantity" style="width:5em;text-align:center" />
			</p>
			<p>
				<label for="multiples_of">In multiples of</label>
				<input type="text" name="product[multiples_of]" value="{$product.multiples_of|escape:"html":"UTF-8"}" id="multiples_of" style="width:5em;text-align:center" />
			</p>
			<br class="clear" />
		</div>
		
		<p><label>Prices</label></p>
		<table class="table" id="prices" style="width:auto">
			<tr>
				<th>Min. quantity</th>
				<th>Price</th>
			</tr>
			{foreach from="`$prices`" key="index" item="price"}
				<tr>
					<td><input type="text" name="price[{$index}][minimum_quantity]" value="{$price.minimum_quantity}" {if $price.minimum_quantity==1}readonly="readonly"{/if} style="width:5em;text-align:center" /></td>
					<td><input type="text" name="price[{$index}][price]" value="{$price.price}" style="width:5em;text-align:center" /></td>
				</tr>
			{foreachelse}
				<tr>
					<td><input type="text" name="price[0][minimum_quantity]" value="1" readonly="readonly" style="width:5em;text-align:center" /></td>
					<td><input type="text" name="price[0][price]" value="" style="width:5em;text-align:center" /></td>
				</tr>
			{/foreach}
			<tr class="placeholder" style="display:none">
				<td><input type="text" name="price[-][minimum_quantity]" value="" style="width:5em;text-align:center" /></td>
				<td><input type="text" name="price[-][price]" value="" style="width:5em;text-align:center" /></td>
			</tr>
		</table>
		<button id="add_price">Add</button>
		<script type="text/javascript" charset="utf-8">
			{literal}
			$(function() {
				
				var price_counter = 0;
				
				$('#add_price').click(function() {
					var placeholder = $('#prices').find('.placeholder');
					var new_row = placeholder.clone().show().removeClass('placeholder');
					price_counter++;
					new_row.find('input').each(function() {
						$(this).attr('name', $(this).attr('name').replace('-', 'a'+price_counter));
					});
					new_row.insertBefore(placeholder);
				});
			});
			{/literal}
		</script>
	</div>
</div>